import React from "react";
import {  TabBar } from 'antd-mobile'
import {
    useLocation,
    useNavigate,
    Outlet,
} from 'react-router-dom'

import "./index.css"

// 底部tabbar
const Bottom = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value) => {
        navigate(value)
    }

    const tabs = [
        {
            key: '/home/index',
            title: '首页',
            icon: 'icon-ind',
        },
        {
            key: '/home/list',
            title: '找房',
            icon: 'icon-findHouse',
        },
        {
            key: '/home/news',
            title: '咨询',
            icon: 'icon-infom',
        },
        {
            key: '/home/profile',
            title: '我的',
            icon: 'icon-my',
        },
    ]
    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={<i className={`iconfont ${item.icon}`}></i>}
                    className={`${pathname}` === `${item.key}` ? 'active' : ''} title={item.title} />
            ))}
        </TabBar>
    )
}

export default class Home extends React.Component {
    render() {
        return (
            <div className='app'>
                <div className='body'>
                    <Outlet />
                </div>
                <div className='bottom'>
                    <Bottom />
                </div>
            </div>
        )
    }
}



